<template>
	<view class="">
		<view class="row" style="flex-wrap: wrap;padding:15upx;">
			<view class="item-con" v-for="(item,index) in list" :key="index">
				<image :src="item.icon" mode="" class="item-g"></image>
				<view class="item-info">
					<view class="clamp item-title">{{item.name}}</view>
					<view class="item-price">{{item.price}}</view>
				</view>
				<view class="item-cart animated" hover-class="bounceIn" @tap="addCart(item.id,'1','list')">
					<image src="/static/img/gouwuche.png" mode="" class="c-icon" ></image>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
export default {
	props: {
		list: Array
	}
};
</script>

<style scoped lang="scss">
.item-con {
	width: 350upx;
	position: relative;
	margin-bottom: 20upx;
	border-radius: 10upx;
	margin-right: 20upx;
	position: relative;
	background: #FFFFFF;
	overflow: hidden;
}
.item-con:nth-child(2n){
	margin-right: 0;
}
.item-title {
	font-size:28upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #000000;
	line-height: 44upx;
}
.item-price {
	font-size: 32upx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #FE2525;
	line-height: 44upx;
}
.item-price::before{
	content: "￥";
	font-size:14rpx;
	color: #FE2525;
}
.item-g {
	width: 350upx;
	height: 300upx;
	border-radius: 10upx;
}
.item-info{
	padding:20rpx;
}
.c-icon{
	width: 62upx;
	height: 62upx;
}
.item-cart{
	position: absolute;
	right: 20upx;
	bottom: 10upx;
}
</style>
